<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="设备名称" >
        <el-input
          v-model="queryParams.roleName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="设备编号" >
        <el-input
          v-model="queryParams.roleName"
          placeholder="请输入设备编号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="时间">
        <el-date-picker
          v-model="dateRange"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="roleList" stripe border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="设备编号" property="jhdh" width="150" > </el-table-column>
      <el-table-column align="center" label="名称"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="折旧年月" property="cglx" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="折旧方法"  property="cgsl" width="100" ></el-table-column>
      <el-table-column label="购置金额" property="jhje" align="center" width="100"></el-table-column>
      <el-table-column align="center" label="使用寿命（月）" property="cjren" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="净残率（%）"  property="beizhu" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="折旧月数"  property="dqjd" :show-overflow-tooltip="true" ></el-table-column>

      <el-table-column align="center" label="初期净值" property="spjssj"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="本月折旧" property="spjssj"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="累计折旧" property="spjssj"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="净值" property="spjssj"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="初期净值" property="spjssj"  :show-overflow-tooltip="true" ></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 15px;float: right"
      :total="40">
    </el-pagination>

  </div>
</template>

<script>

  export default {
    name: "Role",
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [
          { jhdh:'CGJH2020000265',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000264',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'2',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000263',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'3',spjssj:'2020-10-02'}
        ],
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [
          { value: '1',label: '进行中'},
          { value: '2',label: '已结束'},
          { value: '3',label: '未提交'},
        ],
        // 菜单列表
        menuOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roleName: undefined,
          roleKey: undefined,
          status: undefined,
          checked:true
        },
        // 表单参数
        form: {},

      };
    },
    created() {

    },
    methods: {

      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    }
  };
</script>
